import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { SkeletonItemv1Wrapper } from "./style";
import { Skeleton } from "antd";

interface IProps {
  children?: ReactNode;
  imageWidth?: number;
  imageHeight?: number;
}

const SkeletonItemv1: FC<IProps> = () => {
  return <SkeletonItemv1Wrapper>
    {
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map(item => (
        <div className="skelet-item" key={item}>
          <Skeleton.Image active style={{ backgroundColor: 'rgba(255, 255, 255, .5)', width: "300px", height: "300px" }} />
          <Skeleton.Button active size="default" style={{ marginTop: "10px", backgroundColor: 'rgba(255, 255, 255, .5)', width: "40px", height: "20px" }} />
          <Skeleton.Input active size="default" style={{ marginTop: "10px", backgroundColor: 'rgba(255, 255, 255, .5)', width: "180px", height: "30px" }} />
        </div>
      ))
    }
  </SkeletonItemv1Wrapper>;
};

export default memo(SkeletonItemv1);